<template>
  <div>
    <!-- <div class="extension-top">
      <div class="extension-top-input"><label class="label">总机号</label><el-input class="inputbox" v-model="telNumber" placeholder="总机号码" /></div>
      <el-button size="small" type="primary" @click="saveBtn">保 存</el-button>
    </div> -->
    <TopFilter
      ref="topFilter"
      :list="topFilterList"
      :cols="3"
      labelWidth="90"
      @filterChange="changeHandle"
      @onCollapse="collapseHandle"
    ></TopFilter>
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :isSelectColumn="false"
      :onColumnsChange="columns => this.columns = columns"
    />
    <BaseDialog
        :visible.sync="visible"
        :title="dialogTitle"
        destroyOnClose
        width="850px"
        :containerStyle="{height: '100%', overflow: 'auto'}">
        <EditPhone :rowData="activeData" @close="closeHandler"></EditPhone>
    </BaseDialog>
  </div>
</template>

<script>
import { getBind } from '@/api/potenCus/linephone/extension'
import EditPhone from './editPhone'
import { dictionary } from '@/utils/dictMixin';

export default {
  name: 'extension',
  mixins: [dictionary],
  components: {
    EditPhone
  },
  data () {
    return {
      formList: this.createFormList(),
      topFilterList: this.createTopFilters(),
      columns: this.createTableColumns(),
      fetchParams: {},
      fetchApi: getBind,
      dialogTitle: '分机号绑定',
      visible: false,
      activeData: {}
      // telNumber: '' // 总机号保存
    }
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  methods: {
    saveBtn () {
      // 总机号保存
      // this.telNumber
    },
    createFormList () {
      return [
        {
          type: 'INPUT',
          label: '总机号',
          fieldName: '',
          placeholder: '',
          rules: [{ required: true, message: '请填总机号', trigger: 'blur' },
                  { pattern: /^([0-9A-Za-z]){1,6}$/, message: '至多6位字母或数字' }],
        },
      ]
    },
    createTopFilters () {
      return [
        {
          type: 'INPUT',
          label: '员工姓名',
          fieldName: 'employeeName',
          placeholder: '请输入...'
        },
        {
          type: 'INPUT',
          label: '员工编号',
          fieldName: 'employeeNo',
          placeholder: '请输入...'
        },
        {
          type: 'INPUT',
          label: '分机号',
          fieldName: 'extension',
          placeholder: '请输入...'
        }
      ]
    },
    createTableColumns() {
      return [
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 90,
          fixed: 'left',
          render: (props, h) => {
            if(this.type != 'show'){
              return (
                <div>
                  <el-button size="mini" type="text" disabled={ props.row.mobilePhone ? false : true } onClick={() => props.row.mobilePhone ? this.giveExtensionHandle(props.row) : ''}>
                    绑定分机号
                  </el-button>
                </div>
              );
            }
          }
        },
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '分机号',
          dataIndex: 'extension',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '员工编号',
          dataIndex: 'employeeNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '员工姓名',
          dataIndex: 'employeeName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '手机号码',
          dataIndex: 'mobilePhone',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '数据来源',
          dataIndex: 'dataSources',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1045'),
          render: props => {
            return <span>{this.preDictHandler(props.row.dataSources, '1045')}</span>;
          }
        }
      ]
    },
    // 绑定分机号
    giveExtensionHandle (row) {
      this.visible = true
      this.activeData = row
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val);
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    closeHandler (val) {
      this.visible = false
      if (val === 'refresh') {
        this.fetchParams = { ...this.fetchParams };
      }
    },
    formChangeHandle(val) {
      this.saveData = _.cloneDeep(val);
    },
    // 字典数据使用前预处理
    preDictHandler(val, code){
      let resultText = val && String.prototype.includes.call(val, code) ? this.createDictText(val, code) : val;
      return resultText;
    },
  }
}
</script>

<style lang="less" scoped>
  .extension-top{
    display: flex;
    margin: 10px 0;
    .extension-top-input{
      display: inherit;
      margin-right: 10px;
      .label{
        align-items: center;
        display: inherit;
        padding-right: 10px;
        justify-content: flex-end;
        width: 80px;
      }
      .inputbox{
        width: 150px
      }
    }
  }
</style>
